import 'package:flutter/material.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/pages/test_detail/model/model_test_detail.dart';
import 'package:flutter_base/pages/test_questions/test_questions_logic.dart';
import 'package:flutter_base/utils/log/utils_log.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'package:flutter_base/widgets/image/image_view.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 5-图片选择题(QuestionTypeImageChoice)

class ImageChoiceQuestionWidget extends StatelessWidget {
  // const ImageChoiceQuestionWidget({super.key});
  // final List<ModelTestDetailQuestionsOptions> options;
  // final Function(List<int>) onSelectionChanged;
  // final List<int> initialSelection;

  final TestQuestionsLogic logic;

  final bool isMultiSelect;

  const ImageChoiceQuestionWidget({
    super.key,
    required this.logic,
    this.isMultiSelect = false,
  });

  @override
  Widget build(BuildContext context) {
    double spacing = ((1.sw - 48.w - 300.w) ~/ 2) * 1.0;
    return SizedBox(
      width: double.infinity,
      child: Wrap(
          spacing: spacing,
          runSpacing: 12.w,
          children: (logic.currentQuestion?.options ?? []).map((option) {
            int questionId = logic.currentQuestion?.id ?? 0;
            final bool isSelected =
                logic.userAnswers[questionId]?.contains(option.id) == true;

            return GestureDetector(
              onTap: () {
                // clog('logic.userAnswers[questionId]   ${logic.userAnswers[questionId]}');
                // List<int> selectedIds = initialSelection;
                logic.toggleAnswer(option.id ??0);
                // if (isMultiSelect) {
                //   // 多选模式
                //   if (logic.userAnswers[questionId]?.contains(option.id) ==
                //       true) {
                //     // selectedIds.remove(option.id);
                //     logic.userAnswers[questionId]?.remove(option.id);
                //   } else {
                //     logic.userAnswers[questionId]?.add(option.id ?? 0);
                //     // selectedIds.add(option.id!);
                //   }
                // } else {
                //   // selectedIds;
                //   // 单选模式
                //   logic.userAnswers[questionId] = [option.id ?? 0];
                // }
                // logic.update();
//
//       // 通知父组件选择变化
//             clog('daslkdjaslkjd');
//                 onSelectionChanged(selectedIds);
//     });
//   }
//             if (option.id != null) {
//               _toggleSelection(option.id!);
//             }
              },
              child: Container(
                width: 100.w,
                height: 100.w,
                padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 12.w)
                    .copyWith(bottom: 0.w),
                decoration: BoxDecoration(
                  color: isSelected ? AppColor.primary : Colors.white,
                  borderRadius: BorderRadius.circular(12.w),
                  boxShadow: [
                    BoxShadow(
                      color: AppColor.primary.withOpacity(0.12),
                      offset: Offset(0, 4.w),
                      blurRadius: 11.w,
                    ),
                  ],
                  // border: Border.all(
                  //   color: isSelected ? AppColor.primary : Colors.transparent,
                  //   width: isSelected ? 2.w : 0,
                  // ),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // 图片容器
                    Container(
                        width: 48.w,
                        height: 48.w,
                        decoration: BoxDecoration(
                          color: const Color(0xFFE4EBF0),
                          borderRadius: BorderRadius.circular(100.w),
                        ),
                        child: ImageView(
                          imageUrl: option.image,
                          radius: 18.w,
                          backgroundColor: Colors.transparent,
                        )),

                    // const Spacer(),
                    // 文本标签
                    Expanded(
                      child: Text(
                        option.content ?? '',
                        style: TextStyle(
                          fontSize: 14.sp,
                          fontWeight: FontWeight.w600,
                          color:
                              isSelected ? Colors.white : AppColor.color0C0A09,
                          fontFamily: 'Outfit',
                        ),
                        textAlign: TextAlign.center,
                      ),
                    )
                  ],
                ),
              ),
            );
          }).toList()),
    );
  }
}

// class ImageChoiceQuestionWidget extends StatefulWidget {
//   final List<ModelTestDetailQuestionsOptions> options;
//   final Function(List<int>) onSelectionChanged;
//   final List<int> initialSelection;
//   // final bool isMultiSelect;
//
//   const ImageChoiceQuestionWidget({
//     super.key,
//     required this.options,
//     required this.onSelectionChanged,
//     required this.initialSelection,
//     // this.isMultiSelect = false,
//   });
//
//   @override
//   State<ImageChoiceQuestionWidget> createState() => _ImageChoiceQuestionWidgetState();
// }
//
// class _ImageChoiceQuestionWidgetState extends State<ImageChoiceQuestionWidget> {
//   late List<int> _selectedIds;
//
//   @override
//   void initState() {
//     super.initState();
//     _selectedIds = widget.initialSelection?.toList() ?? [];
//   }
//
//   @override
//   void didUpdateWidget(ImageChoiceQuestionWidget oldWidget) {
//     super.didUpdateWidget(oldWidget);
//     if (oldWidget.initialSelection != widget.initialSelection) {
//       _selectedIds = widget.initialSelection?.toList() ?? [];
//     }
//   }
//
//   void _toggleSelection(int id) {
//     setState(() {
//       if (widget.isMultiSelect) {
//         // 多选模式
//         if (_selectedIds.contains(id)) {
//           _selectedIds.remove(id);
//         } else {
//           _selectedIds.add(id);
//         }
//       } else {
//         // 单选模式
//         _selectedIds = [id];
//       }
//
//       // 通知父组件选择变化
//       widget.onSelectionChanged(_selectedIds);
//     });
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return Column(
//       children: [
//         for (int i = 0; i < widget.options.length; i += 3)
//           _buildRow(i),
//       ],
//     );
//   }
//
//   Widget _buildRow(int startIndex) {
//     // 确保不会超出数组边界
//     int endIndex = startIndex + 3 > widget.options.length
//         ? widget.options.length
//         : startIndex + 3;
//
//     List<ModelTestDetailQuestionsOptions> rowOptions =
//         widget.options.sublist(startIndex, endIndex);
//
//     return Container(
//       margin: EdgeInsets.only(bottom: 12.w),
//       child: Row(
//         mainAxisAlignment: MainAxisAlignment.spaceBetween,
//         children: rowOptions.map((option) => _buildImageOption(option)).toList(),
//       ),
//     );
//   }
//
//   Widget _buildImageOption(ModelTestDetailQuestionsOptions option) {
//     final bool isSelected = option.id != null && _selectedIds.contains(option.id!);
//
//     return GestureDetector(
//       onTap: () {
//         if (option.id != null) {
//           _toggleSelection(option.id!);
//         }
//       },
//       child: Container(
//         width: 100.w,
//         height: 100.w,
//         decoration: BoxDecoration(
//           color: Colors.white,
//           borderRadius: BorderRadius.circular(12.w),
//           boxShadow: [
//             BoxShadow(
//               color: AppColor.primary.withOpacity(0.12),
//               offset: Offset(0, 4.w),
//               blurRadius: 11.w,
//             ),
//           ],
//           border: Border.all(
//             color: isSelected ? AppColor.primary : Colors.transparent,
//             width: isSelected ? 2.w : 0,
//           ),
//         ),
//         child: Column(
//           mainAxisAlignment: MainAxisAlignment.center,
//           children: [
//             // 图片容器
//             Container(
//               width: 48.w,
//               height: 48.w,
//               decoration: BoxDecoration(
//                 color: const Color(0xFFE4EBF0),
//                 borderRadius: BorderRadius.circular(100.w),
//               ),
//               child: option.image != null && option.image!.isNotEmpty
//                 ? ClipRRect(
//                     borderRadius: BorderRadius.circular(100.w),
//                     child: Image.network(
//                       option.image!,
//                       width: 36.w,
//                       height: 36.w,
//                       fit: BoxFit.cover,
//                     ),
//                   )
//                 : Icon(
//                     Icons.image,
//                     size: 24.w,
//                     color: const Color(0xFF7F909F),
//                   ),
//             ),
//             SizedBox(height: 12.w),
//             // 文本标签
//             Text(
//               option.content ?? '',
//               style: TextStyle(
//                 fontSize: 14.sp,
//                 fontWeight: FontWeight.w600,
//                 color: AppColor.color0C0A09,
//                 fontFamily: 'Outfit',
//               ),
//               textAlign: TextAlign.center,
//             ),
//           ],
//         ),
//       ),
//     );
//   }
// }
